<template>
  <div>
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="main">
      <div class="content">
          <div class="title">挂牌需求详情</div>
          <div style="display: flex;flex-direction: row;justify-content: space-between;">
            <ul class="infor-list">
              <li class="infor-item">
                <span class="titl">企业名称：</span>{{detail.companyName}}
              </li>
              <li class="infor-item">
                <span class="titl">联系人：</span>{{detail.companyContactName}}
              </li>
              <!-- <li class="infor-item">
                <span class="titl">联系方式：</span>{{detail.companyContactMobile}}
              </li> -->
              <li class="infor-item">
                <span class="titl">需求编号：</span>{{detail.identifier}}
              </li>
              <li class="infor-item">
                <span class="titl">商品名称：</span>{{detail.name}}
              </li>
              <li class="infor-item">
                <span class="titl">商品分类：</span>{{detail.categoryName}}
              </li>
              <li class="infor-item">
                <span class="titl">期望价格（单价）：</span>{{detail.topPrice}}
              </li>
              <li class="infor-item">
                <span class="titl">求购数量：</span>{{detail.topNum}}
              </li>
              <li class="infor-item">
                <span class="titl">单位：</span>{{detail.unit}}
              </li>
              <li class="infor-item">
                <span class="titl">需求日期：</span>{{detail.createTime}}
              </li>
              <li class="infor-item">
                <span class="titl">报价日期：</span>{{detail.startDate}} ~ {{detail.endDate}}
              </li>
              <li class="infor-item">
                <span class="titl">收货区域：</span>{{detail.startProvinceName}}{{detail.startCityName}}
              </li>
              <li class="infor-item">
                <span class="titl">状态：</span>{{detail.statusText}}
              </li>
              <li class="infor-item">
                <span class="titl">产品描述：</span>{{detail.productRemark||'无'}}
              </li>
              <li class="infor-item">
                <span class="titl">付款说明：</span>{{detail.payRemark||'无'}}
              </li>
              <li class="infor-item">
                <span class="titl">其他要求：</span>{{detail.remark||'无'}}
              </li>

            </ul>
              <div class="imgs">
                <SwiperPiczoom v-if="detail.image" :imgs="detail.image" />
              </div>
           </div>
        <div class="btn-wrapper">
          <div class="btn" @click="$router.go(-1)">返回</div>
          <div class="btn" v-if="detail.status === 2" @click="quotedPriceClick">立即报价</div>
        </div>
      </div>
    </div>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :model='dialogForm' ref='dialogForm' :rules='rules' label-width='80px'>
        <table cellpadding="0" cellspacing="0" class="specifications">
          <tr>
            <td>名称</td>
            <td>{{detail.name}}</td>
          </tr>
          <tr>
            <td>期望数量</td>
            <td>{{detail.topNum}}</td>
          </tr>
          <tr>
            <td>期望价格（单价）</td>
            <td>{{detail.topPrice}}元/{{detail.unit}}</td>
          </tr>
        </table>
        <el-form-item label-width="192px" label='本次期望价格（单价）报价' prop='price' style="margin-top: 10px;">
          <el-input v-model="dialogForm.price" placeholder="请输入本次期望价格（单价）报价" style="width: 100%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-if="detail.status == 2" @click="handleSave('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { matchGetById, matchApply } from "@/api/front-transaction.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import SwiperPiczoom from "../shop/productDetail/components/SwiperPiczoom/index";
export default {
  name: '',
  components: { Footer, Header,SwiperPiczoom },
  data() {
    return {
      dialogFormVisible: false,
      submitFlag: false,
      detail: {},
      skuIndex: -1,
      num: 1,
      dialogForm: {
        price: ''
      },
      rules: {
        price: [
          { required: true, message: '请输入本次期望价格（单价）报价', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              const reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
              if (!value) {
                callback()
              } else {
                if (reg.test(value)) {
                  callback()
                } else {
                  return callback(new Error('请输入正确的金额'))
                }
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const params = {
        id: this.$route.query.id
      }
      matchGetById(params).then((res) => {
        this.detail = res || {}
      });
    },
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let currentPrice = parseFloat(this.dialogForm.price);
          let topPrice = parseFloat(this.detail.topPrice);
          if (currentPrice > topPrice) {
            this.$message.error("报价不能高于期望价格");
            return;
          }

          if (this.submitFlag) return
          this.submitFlag = true
          const params = {
            id: this.$route.query.id,
            price: this.dialogForm.price
          }
          matchApply(params).then((res) => {
            this.getDetail()
            this.dialogForm.price = ''
            this.dialogFormVisible = false
            this.submitFlag = false
            
            this.$message.success("报价成功");
          }).catch(err => {
            this.submitFlag = false
          })
        }
      })
    },
    quotedPriceClick() {
      let endDate = new Date(this.detail.endDate);
      let currentDate = new Date();
      if (currentDate > endDate) {
        this.$message.error("报价时间已结束");
      } else {
        this.dialogFormVisible = true;
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.main {
  padding: 20px 0;
  min-width: 1200px;
  background-color: #f6f6f6;
  .content {
    padding: 25px 34px 60px;
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    .title {
      line-height: 34px;
      font-size: 24px;
      color: #000000;
    }
    .infor-list {
      padding-top: 26px;
      .infor-item {
        padding: 5px 0;
        line-height: 24px;
        font-size: 16px;
        color: #000000;
        .titl {
          display: inline-block;
          vertical-align: top;
          padding-right: 28px;
          width: 194px;
          box-sizing: border-box;
          text-align: right;
        }
      }
    }
    .btn-wrapper {
      display: flex;
      justify-content: space-between;
      margin: 10px auto 0;
      width: 280px;
      .btn {
        width: 114px;
        height: 39px;
        line-height: 39px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background-color: #965f29;
        border-radius: 20px;
        cursor: pointer;
      }
    }
  }
}
.specifications {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;
  td {
    border: 1px solid #dddddd;
  }
  td:first-child {
    padding-right: 35px;
    width: 172px;
    height: 40px;
    font-size: 14px;
    text-align: right;
    color: #000000;
    background-color: #fffbfa;
  }
  td:last-child {
    padding-left: 22px;
  }
}
</style>
